<template>
  <el-card class="register-card">
    <h1>创建您的账户</h1>
    <p>
      已经有账户了？
      <router-link to="login">点击登录</router-link>
    </p>
    <el-form
      ref="registerForm"
      :model="registerForm"
      :rules="rules"
      hide-required-asterisk
      label-width="80px"
    >
      <el-form-item label="用户名" prop="username">
        <el-tooltip placement="right" effect="light">
          <div slot="content">用户名是用户的唯一标识</div>
          <el-input v-model="registerForm.username"></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-tooltip placement="right" effect="light">
          <div slot="content">密码的长度需为6-20个字符</div>
          <el-input show-password v-model="registerForm.password" maxlength="20"></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input show-password v-model="registerForm.checkPassword"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input type="email" v-model="registerForm.email"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phoneNumber">
        <el-input
          v-model="registerForm.phoneNumber"
          type="text"
          onkeyup="value=value.replace(/[^\d]/g,'')"
        >
          <template slot="prepend">+86</template>
        </el-input>
      </el-form-item>
      <div class="register-button">
        <el-button type="primary" @click="register('registerForm')">创建账户</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    let validatePassword = (rule, value, callback) => {
      // console.log("come here password");
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        // if (this.registerForm.checkPassword !== '') {
        //   console.log(this.registerForm.checkPassword);
        //   this.$refs.registerForm.validateField('checkPassword');
        // }
        callback();
      }
    };
    let confirmPassword = (rule, value, callback) => {
      // console.log('COme here check');
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        username: "",
        password: "",
        checkPassword: "",
        email: "",
        phoneNumber: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 20, message: "长度在5-20个字符之间", trigger: "blur" },
        ],
        password: [
          { validator: validatePassword, trigger: "blur" },
          { min: 6, max: 20, message: "长度在6-20个字符之间", trigger: "blur" },
        ],
        checkPassword: [{ validator: confirmPassword, trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        phoneNumber: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post("/register", JSON.stringify(this.registerForm))
            .then((response) => {
              if (response.status === 200) {
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
                this.$router.push("/loginPage/login");
              } else {
                console.log(response.status);
                this.$message({
                  message: "用户名已存在",
                  type: "error",
                });
              }
            })
            .catch((error) => {
              this.$message({
                message: "注册失败",
                type: "error",
              });
              console.error(error);
            });
        } else {
          // console.log('error submit!!')
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.el-form {
  margin: 80px 80px 100px 100px;
}

.el-form .el-input {
  width: 380px;
  margin-left: -100px;
}

.register-card {
  width: 800px;
}

h1 {
  font-size: 25px;
}

.register-button {
  margin-top: 50px;
  margin-left: 90px;
  text-align: left;
}
</style>
